<template>
    <div id="carbon-accounting-module">
      <header class="page-header">
        <h1>碳排放管理 - 行业选择与指南查阅</h1>
      </header>
  
      <!-- 行业选择区域 -->
      请选择行业（选择行业后自行弹出行业指南）
      <el-select v-model="selectedIndustry" placeholder="请选择所属行业" @change="onIndustryChange">
        <el-option
          v-for="(industry, index) in industries"
          :key="index"
          :label="industry.name"
          :value="industry.id">
        </el-option>
      </el-select>
  
      <!-- 指南查阅区域 -->
      <transition name="fade">
        <div v-if="selectedIndustry !== null && selectedGuideline.content" class="guideline-container">
          <h2>{{ selectedIndustryGuideline.title }}</h2>
          <p v-html="selectedGuideline.content"></p>
        </div>
      </transition>
  
      <!-- 虚拟数据定义在脚本部分 -->
      <el-button type="primary" v-if="selectedIndustry !== null && selectedGuideline.content" @click="quding">确定选择</el-button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        selectedIndustry: null,
        industries: [
          { id: '1', name: '制造行业' },
          { id: '2', name: '能源行业' },
          { id: '3', name: '建筑行业' },
          // 更多行业...
        ],
        guidelines: [
        {
    id: "1",
    industryId: "1",
    title: "电力行业碳核算指南",
    content: `
      <header>
        <h1>电力行业碳排放核算与报告指南</h1>
      </header>
      <p>电力行业碳排放核算与报告指南：本指南为电力企业提供全面的碳排放核算体系和规范化的报告流程，遵循国家关于电力行业温室气体排放核算的相关标准和规定...</p>
      
      <section>
        <h2>核算范围与原则</h2>
        <p>电力行业的碳排放主要分为生产过程直接排放（如燃煤锅炉、燃气轮机等燃烧化石燃料产生的二氧化碳）以及间接排放（如购买并使用的电力、热力导致的间接碳排放）...</p>
      </section>

      <section>
        <h2>核算步骤</h2>
        <ol>
          <li>收集与整理各类能源消耗数据及其对应的碳排放因子。</li>
          <li>依据燃料类型和消耗量计算直接排放量，包括燃煤、燃气等各种化石燃料燃烧产生的二氧化碳排放。</li>
          <li>结合购入及自产电力、热力数据，计算间接排放量。</li>
          <li>汇总所有排放源的数据，形成年度碳排放报告，并进行质量控制与核查。</li>
        </ol>
      </section>

      <section>
        <h2>报告要求与附录信息</h2>
        <p>企业在每个会计年度结束后按照规定期限完成上一年度碳排放核算，并在报告中详细列出年度总碳排放量、各排放源数据、数据质量控制情况、排放趋势分析及减排措施效果等内容。附录中提供了各类化石燃料碳氧化率、碳含量及电网平均排放因子参考值，供企业在核算过程中查阅使用。</p>
      </section>
    `
  },
          {
  id: '2',
  industryId: '2',
  title: '钢铁行业碳核算指南',
  content: `
    <header>
      <h1>钢铁行业碳排放核算与报告指南</h1>
    </header>
    <p>钢铁行业碳排放核算与报告指南：本指南为钢铁企业提供全面的碳排放核算体系和规范化的报告流程，遵循国家关于钢铁行业温室气体排放核算的相关标准和规定...</p>
    <section>
      <h2>核算范围与原则</h2>
      <p>钢铁行业的碳排放主要分为生产过程直接排放（如高炉炼铁、转炉炼钢等产生的二氧化碳）以及间接排放（如使用外购电力、热力导致的排放）...</p>
    </section>
    <section>
      <h2>核算步骤</h2>
      <ol>
        <li>收集与整理各类能源消耗数据及其对应的碳排放因子。</li>
        <li>根据生产工艺计算直接排放量。</li>
        <li>结合购买的电力、热力数据计算间接排放量。</li>
        <li>汇总所有排放源的数据，形成年度碳排放报告。</li>
      </ol>
    </section>
    <section>
      <h2>报告要求与附录信息</h2>
      <p>企业在每个会计年度结束后按照规定期限完成上一年度碳排放核算，并在报告中详细列出年度总碳排放量、各排放源数据、质量控制情况、排放趋势分析及减排措施效果等内容。附录中包含各类原材料和能源的碳排放系数、工艺排放系数等参考值，以供企业在核算过程中查阅使用。</p>
    </section>
  `,},
  {
  id: '3',
  industryId: '3',
  title: '建筑行业碳核算指南',
  content: `
    <header>
      <h1>建筑行业碳排放核算与报告指南</h1>
    </header>
    <p>建筑行业碳排放核算与报告指南：本指南为建筑企业提供完整的碳排放核算方法和规范化的报告流程，遵循国家关于建筑行业温室气体排放核算的相关标准和规定。企业应确保所报告的碳排放数据准确、完整，并按时提交年度碳排放报告。</p>
    
    <section>
      <h2>核算范围与原则</h2>
      <p>建筑行业的碳排放主要涵盖建筑材料生产、运输过程中的直接和间接排放，施工阶段的能源消耗，以及建筑物在使用过程中的运营能耗导致的排放等...</p>
    </section>

    <section>
      <h2>核算步骤</h2>
      <ol>
        <li>收集并整理建筑项目的全生命周期内各类材料生产、运输、施工及运营阶段的能源消耗数据及其对应的碳排放因子。</li>
        <li>分别计算原材料生产、运输过程的直接和间接排放量。</li>
        <li>根据施工过程中设备使用情况及运营阶段的能耗统计，计算相应的碳排放量。</li>
        <li>汇总所有排放源的数据，形成年度碳排放报告。</li>
      </ol>
    </section>

    <section>
      <h2>报告要求与附录信息</h2>
      <p>企业在每个会计年度结束后按照规定期限完成上一年度碳排放核算，并在报告中详细列出项目各阶段的碳排放量、数据来源、质量控制情况、排放趋势分析及减排措施效果等内容。附录中提供各类建材碳排放系数、施工设备能耗排放因子、建筑物能效指标等参考值，供企业在核算过程中查阅使用。</p>
    </section>
  `,
},
        ],
        selectedGuideline: {}
      };
    },
    computed: {
      selectedIndustryGuideline() {
        return this.guidelines.find(guideline => guideline.industryId === this.selectedIndustry);
      }
    },
    methods: {
        quding(){
            this.$message({
              message: "选择行业成功",
              type: 'success'
            });
        },
      onIndustryChange(newIndustryId) {
        this.selectedIndustry = newIndustryId;
        this.selectedGuideline = this.selectedIndustryGuideline || {};
      }
    }
  };
  </script>
  
  <style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  
  .guideline-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #eaeaea;
  }
  </style>